const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports={
    context:path.resolve(__dirname,"../"),
    entry:{
        app:"./src/main.js"
    },
    output:{
        path:path.resolve('./dist'),
        filename:"./js/[name].bundle.js",
    },
    plugins:[
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            template:"./index.html"
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: "[hash].css",
            chunkFilename: "[hash].css"
          })
    ],
    optimization:{
        splitChunks:{
            chunks:"async" //指挥分割异步引入的第三方公共库或者组件
            // chunks:"all" //静态引入或者动态引入都会生成三方库打包库
        }
    },
    module:{
        rules:[
            //vue-loader
            {
                test:/\.vue$/,
                loader:["vue-loader"]
            },
            //babel
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            //css-loader
            {
                test:/\.css$/,
                use:[ {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      // you can specify a publicPath here
                      // by default it use publicPath in webpackOptions.output
                      publicPath: '../'
                    }
                  },
                  "css-loader"
                ]
            },
            //less-loader
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,"less-loader"]
            },
            //url-loader
            {
                test:/\.(jpg|jpeg|png)$/,
                use:[
                    {
                        loader:"url-loader",
                        options:{
                            limit:1024,
                            outputPath:"img"
                        }
                    }
                ]
            },
            //html-loadeer
            {
                test:/\.html$/,
                loader:"html-loader"
            },
            //less-loader,css-loader,style-loader
            {
                test:/\.less$/,
                use:[
                    {
                        loader:"style-loader" //创建style标签
                    },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"less-loader"
                    }
                ]
            },
            
        ]
    }, 
    resolve:{
        alias:{
            "vue$":"vue/dist/vue.esm.js"
        }
    }
}